<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
<!--  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">-->
  <link rel="stylesheet" href="/js/element-plus/index.css">

</head>

<body>
<div id="app">

  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
          <el-breadcrumb-item
          ><a href="/">promotion management</a></el-breadcrumb-item
          >
          <el-breadcrumb-item>promotion list</el-breadcrumb-item>
          <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
        </el-breadcrumb>

      </el-header>
      <el-container>
        <el-aside >
          <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  :collapse="isCollapse"
                  @open="handleOpen"
                  @close="handleClose"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><location /></el-icon>
                <span>Navigator One</span>
              </template>
              <el-menu-item-group>
                <template #title><span>Group One</span></template>
                <el-menu-item index="1-1">item one</el-menu-item>
                <el-menu-item index="1-2">item two</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="Group Two">
                <el-menu-item index="1-3">item three</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="1-4">
                <template #title><span>item four</span></template>
                <el-menu-item index="1-4-1">item one</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="2">
              <el-icon><icon-menu /></el-icon>
              <template #title>Navigator Two</template>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <el-icon><document /></el-icon>
              <template #title>Navigator Three</template>
            </el-menu-item>
            <el-menu-item index="4">
              <el-icon><setting /></el-icon>
              <template #title>Navigator Four</template>
            </el-menu-item>
          </el-menu>

        </el-aside>
        <el-main>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="productName" label="产品" width="180">
            </el-table-column>
            <el-table-column prop="price" label="价格" width="180">
            </el-table-column>
            <el-table-column prop="stock" label="库存">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small"  @click="editPro(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                         :page-sizes="[5, 10, 20, 50]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>

          <!--    编辑-->

          <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="proform">
              <el-form-item label="产品名称" :label-width="formLabelWidth">
                <el-input v-model="proform.productName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="产品价格" :label-width="formLabelWidth">
                <el-input v-model="proform.price" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="产品库存" :label-width="formLabelWidth">
                <el-input v-model="proform.stock" autocomplete="off"></el-input>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="editProVue">确 定</el-button>
            </div>
          </el-dialog>

        </el-main>
      </el-container>
    </el-container>
  </div>

</div>

</body>
<script src="/js/vue.global.min.js"></script>
<script src="/axios.min.js"></script>
<!-- import JavaScript -->
<!--<script src="https://unpkg.com/element-plus"></script>-->
<script src="/js/element-plus/index.full.js"></script>

<script>
  const App = {
    data() {
      return {
        isCollapse:false,
        currentPage: 1,
        pagesize:5,
        totalpage:0,
        tableData: [],
        total:0,
        dialogFormVisible: false,
        proform: {
          productName: '',
          price: '',
          stock: '',
          introduction: ""
        },
        formLabelWidth: '120px'

      };
    },
    created() {
      this.getProListPage(1,5);
    },
    methods: {
      handleOpen(key,keyPath){console.log(key, keyPath)},
      handleClose(key,keyPath){console.log(key, keyPath)},
      editProVue(){

        axios.post('/editProVue', this.proform)
                .then( (response)=> {
                  console.log(response);
                  if (response.data.code=='200'){

                    this.dialogFormVisible = false;
                    this.getProListPage(1,5);
                    this.$message({
                      message: '恭喜你，编辑成功',
                      type: 'success'
                    });
                  }

                })
                .catch( (error) =>{
                  console.log(error);
                });
      },
      editPro(row){
        console.log(row)
        this.dialogFormVisible = true;
        this.proform.productId = row.productId
        this.proform.productName = row.productName
        this.proform.    price=row.price
        this.proform.    stock=row.stock
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);

        this.getProListPage(this.currentPage,val);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.getProListPage(val,this.pagesize);
      },
      getProListPage(curpage,pagesize){
        axios.get('/toProListByPageVue', {
          params: {
            curpage: curpage,
            pagesize: pagesize
          }
        })
                .then((response) => {
                  this.tableData = response.data.records;
                  this.currentPage = response.data.current;
                  this.pagesize = response.data.size;
                  this.totalpage = response.data.pages;
                  this.total = response.data.total;
                  console.log(response);
                })
                .catch(function (error) {
                  console.log(error);
                })
                .then(function () {
                  // always executed
                });
      }
    },
  };
  const app = Vue.createApp(App);
  app.use(ElementPlus);
  app.mount("#app");

</script>

</html>